Adding a content box to your site

These content boxes will not appear in Microsoft Explorer. You need to be viewing in Firefox, Google Chrome or Safari.

Code for creating a Rounded Content box.

<div style="background:#eeeeee; padding:10px 20px 20px; border:1px solid #cccccc; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;">

Code for creating a Rounded Color Content box with a thicker border.	<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;">
Change the border colour by changing the hex colour after Solid. Black is #000000 White is #FFFFFF The dark green of the border below is #006666 The light green of the background is #D0E7D0 Click on this link to search for 'hex' colours http://www.colorschemer.com/online.html	Change the border thickness by increasing the number before the px i.e. border:1px to border:6px

Now add a Text Heading to the content box

<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;"> <h1>This is the Heading. The h1 means the heading size<h1>

This is the Heading. The h1 means the heading size

Now add the Text to the content box. When you have finished all of the content in the box close it with </div>

<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;"> <h1>This is the Heading. The h1 means the heading size<h1> Now you can add the rest of the text. Keep typing and when you have finished close the text.</div>

This is the Heading. The h1 means the heading size

Now you can add the rest of the text. Keep typing and when you have finished close the text.

Now add Bullet Points to the content box. When you have finished all of the content in the box close it with </div>

<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;"> <h1>This is the Heading. The h1 means the heading size<h1> Now you can add the rest of the text. Keep typing and when you have finished close the text. <li>Here is point one</li> <li>Here is point two</li> <li>Here is point three</li></div>

This is the Heading. The h1 means the heading size

Now you can add the rest of the text. Keep typing and when you have finished close the text.

• Here is point one
• Here is point two
• Here is point three

Now insert a line between the first two sentences and the Bullet Points Type in </ul> When you have finished all of the content in the box close it with </div>

<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;"> <h1>This is the Heading. The h1 means the heading size<h1> Now you can add the rest of the text. Keep typing and when you have finished close the text. </ul> <li>Here is point one</li> <li>Here is point two</li> <li>Here is point three</li></div>

This is the Heading. The h1 means the heading size

Now you can add the rest of the text. Keep typing and when you have finished close the text.

• Here is point one
• Here is point two
• Here is point three

Now insert a hyperlink Type in <a href="your web address">the link words</a> When you have finished all of the content in the box close it with </div>

<div style="background:#D0E7D0; padding:10px 20px 20px; border:6px solid #006666; -webkit-border-radius: 10px;-khtml-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; margin:10px 0;"> <h1>This is the Heading. The h1 means the heading size<h1> Now you can add the rest of the text. Keep typing and when you have finished close the text. </ul> <li>Here is point one</li> <li>Here is point two</li> <li>Here is point three</li> </ul> Click on <a href="http://wheretostartwithwikisandblogs.wikispaces.com">Where to Start Home Page</a> to go to the Home Page of this wiki </div>

This is the Heading. The h1 means the heading size

Now you can add the rest of the text. Keep typing and when you have finished close the text.

• Here is point one
• Here is point two
• Here is point three

Click on Where to Start Home Page to go to the Home Page of this wiki

HTML Codes
</ul>	for next line, new line or after bullet points
<h1>Your Heading</h1>	For creating headings
<a href="Your web address">Your web link words</a>	For creating a link to a website
<li>your bullet point</li>	Do this for each bullet point
Your text</div>	Your text must finish with this